<template>
    <div class="orderListContainer">
        <HeaderBar title="我的订单" :isBack="true" :right ="optionInfo" @rightClick="rightClick"></HeaderBar>
        <LoginPop ref="loginPop" @onLoginSuccess="onOnLoginSuccess"/>
        <upLoadDownRefresh 
                @refresh="refresh"
                @load="load"
                :maxDistance="300"
                :triggerDistance="100"
                >
                <div class="orderList" v-if="orderList.length>0">
                    <div v-for="item,index in orderList" :key="item.Id" >
                        <div style="width: 100%;height: 1px;background-color: #ededed;" v-if="index>0"></div>
                        <div class="orderItem" @click.stop="gotoOrderDetail(item)">
                            <div class="orderIcon">
                                <img src="../assets/images/daizhifu.png" alt="" v-if="item.OrderStatus=='Pending'" class="statusIcon">
                                <img src="../assets/images/daifahuosel.png" alt="" v-else-if="item.OrderStatus=='Processing'" class="statusIcon">
                                <img src="../assets/images/daishouhuo.png" alt="" v-else-if="item.OrderStatus=='Delivering'" class="statusIcon">
                                <img src="../assets/images/yiquxiao.png" alt="" v-else-if="item.OrderStatus=='Cancelled'" class="statusIcon">
                                <img src="@/assets/images/yiwancheng.png" alt="" v-else class="statusIcon">
                            </div>
                            <div style="flex: 1;margin-left: 5px;text-align: left;">
                                <div style="font-size: small;font-weight: 600; color: lightgrey;">订单编号:{{ item.OrderId }}</div>
                                <div style="font-size: medium;font-weight: 600; ">{{ item.Items[0].Name+'...等' }}</div>
                            </div>
                            <div @click.stop="cancelOrder(item)" v-if="item.OrderStatus=='Pending'||item.OrderStatus=='Processing'" class="option" style="background-color: red;color: white;">{{ '取消' }}</div>
                            <div @click.stop="completeOrder(item)" v-if="item.OrderStatus=='Received'" class="option" style="background-color: red;color: white;">{{ '确认' }}</div>
                            <!-- <div @click.stop="completeOrder(item)" v-if="item.OrderStatus=='Received'" class="option" style="background-color: red;color: white;">{{ '确认' }}</div> -->
                       
                        </div>
                    </div>
                </div>
                 <div v-else class="empty">
                    空空如也，快去选购商品吧~
                </div>
        </upLoadDownRefresh>
    </div>
</template>
<script>
    import HeaderBar from "../components/Header.vue";
    import LoginPop from "../components/popup/LoginPop.vue";
    import { getOrderList,getOrderCancel,getOrderConfirm } from "@/api/order";
    export default {
        name: "OrderList",
        components: {
            HeaderBar,LoginPop

        },

        data() {
            return {
                optionInfo:"",
                editStatus:false,
                orderList:[],
                page:1,
            }
        },
        mounted() {
            let query = {
                orderstatus:0,
                page:this.page,
                size:12
            }
            getOrderList(query).then(res => {
                if(res.Code == 200) {
                     this.orderList = res.Data.Items;
                }else{
                    if(res.Code==401){
                        this.$refs.loginPop.open();
                    }
                }
                // //console.log("订单列表", res);
               
            })
        },
        methods:{
            load(done){
                this.page += 1;
                let query = {
                    orderstatus:0,
                    page:this.page,
                    size:12
                }
                getOrderList(query).then(res => {
                    // //console.log("订单列表", res);
                    this.orderList = this.orderList.concat(res.Data.Items);

                    done()
                })
            },
            completeOrder(item) {
                //console.log("完成订单", item);
                getOrderConfirm({OrderGuid:item.OrderGuid}).then(res => {
                    // //console.log("完成订单", res);
                    if(res.Code == 200) {
                        this.$message.success('确认成功')
                        this.refresh();
                    }else{
                        this.$message.error('确认失败')
                    }
                }).catch(err => {
                    console.log("完成订单", err);
                    this.$message.error('确认失败')
                })
            },
            cancelOrder(item) {
                //console.log("取消订单", item);
                getOrderCancel({OrderGuid:item.OrderGuid}).then(res => {
                    // //console.log("取消订单", res);
                    if(res.Code == 200) {
                        this.$message.success('订单取消成功')
                        this.refresh();
                    }else{
                        this.$message.error('订单取消失败')
                    }
                }).catch(err => {
                    console.log("取消订单", err);
                    this.$message.error('订单取消失败')
                })
            },
            gotoOrderDetail(item) {
                this.$router.push({path:'/orderdetail',query:{id:item.OrderId}})
            },
            refresh(done) {
                this.page = 1;
                this.orderList = []
                let query = {
                    orderstatus:0,
                    page:this.page,
                    size:12
                }
                getOrderList(query).then(res => {
                    // //console.log("订单列表", res);
                    this.orderList = res.Data.Items;
                    done()
                })
            },
            rightClick() {
                
                if(this.editStatus) {
                    this.optionInfo = "完成";
                } else {
                    this.optionInfo = "编辑";
                }
                this.editStatus = !this.editStatus;
            }
        }
    }   
</script>
<style scoped>
    .orderListContainer {
        background-color: #950000;
        height: 100%;
        width: 100vw;
        display: flex;
        flex-direction: column;
    }
    ::v-deep #scroll-container{
        background-color: white !important;
    }
    .orderList {
        height: calc(100vh - 40px);
        overflow: auto;
    }
    .statusIcon{
        width: 40px;
        height: 40px;
        object-fit: contain;
    }
    .orderItem{
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
    .option{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        line-height: 40px;
    }
    .empty{
        text-align: center;
        padding-top: 200px;   
    }
    
</style>